// 获取班级概况数据
axios.get('/student/overview').then(({ data }) => {
    if (data.code === 0) {
        $('.total').text(data.data.total);
        $('.avgSalary').text(data.data.avgSalary);
        $('.avgAge').text(data.data.avgAge);
        $('.proportion').text(data.data.proportion);
    }
})

// 获取学生数据(折线图)
axios.get('/student/list').then(({ data: res }) => {
    // console.log(res);
    // 定义新数组  班级基本信息
    let stuname = [];
    let salary = [];
    let trueSalary = [];

    // 地址信息
    let hometown = { '北京市': [116.4551, 40.2539], };
    let chinaDatas = [];

    // 籍贯信息 饼图
    let obj = {};
    let pie = [];

    // 遍历结果
    res.data.forEach(function (item) {
        // 整理折线图数据
        stuname.push(item.name);
        salary.push(item.salary);
        trueSalary.push(item.truesalary);
        // 整理地图数据
        hometown[item.county] = [item.jing, item.wei];
        chinaDatas.push([{ name: item.county, value: 0 }])
        // 整理饼图数据
        if (obj[item.province]) {
            obj[item.province].value++;  // 判断如果有这个数据 那么这个数据的value值加1
        } else {
            obj[item.province] = { value: 1, name: item.province } // 没有插入这个数据
        }
    })
    // 遍历得到的对象
    for (let key in obj) {
        pie.push(obj[key]) // 把每个对象插入到数组里
    }
    // 调用折线图函数并传参
    lineChart(stuname, salary, trueSalary);
    // 调用地图函数
    map(hometown, chinaDatas)
    // 调用饼图函数并传参
    pieChart(pie)
})

// 点击三个点 让列表显示
$('.bar .title .btn').on('click', function () {
    $('#batch').toggle()
})

// 点击每个li获取该组成绩(柱状图)
$('#batch li').on('click', function () {
    // 获取当前li的索引
    let index = $(this).index() + 1;
    axios.get('/score/batch', {
        params: {
            batch: index
        }
    }).then(({ data }) => {
        // console.log(result);
        // 调用柱状图函数并传参
        barChart(data.data.group, data.data.avgScore, data.data.lt60, data.data.gt60, data.data.gt80)
    })
})

// 刷新页面默认显示一组数据
$('#batch li').eq(0).trigger('click');


// 声明饼图函数 防止混 方便传参
function pieChart(pie) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.pie'));
    option = {
        // 标题
        title: {
            text: '籍贯',
            textStyle: {
                color: '#6d767e',
            }
        },
        // 提示信息
        tooltip: {
            show: true,
            // a: name b: 数据名 c:数据value d:百分比
            formatter: '{a}</br>{b} <strong>{c}</strong>人 {d}%'
        },
        series: [{
            name: '各地学员分布',
            type: 'pie',
            radius: ['10%', '60%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 4
            },
            data: pie
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 折线图
function lineChart(stuname, salary, trueSalary) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.line'));

    // let date = ['张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三','张三',];
    // let data = [75,15,56,48,89,75,15,56,48,89,75,15,56,48,89,];

    option = {
        legend: {
            top: 20
        },
        color: ['#ee6666', '#5470c6'],
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            // left: 'center',
            text: '薪资',
            textStyle: {
                color: '#6d767e',
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, // x轴留白
            data: stuname
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '50%']
        },
        dataZoom: [{
            start: 0,
            end: 10
        } // 滚动条位置
        ],
        series: [{
            smooth: true,
            name: '期望薪资',
            type: 'line',
            symbol: 'none',
            data: salary
        },
        {
            smooth: true,
            name: '实际薪资',
            type: 'line',
            symbol: 'none',
            data: trueSalary
        }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 柱状图
function barChart(group, avgScore, lt60, gt60, gt80) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.barChart'));

    let option = {
        grid: {
            top: 30,
            bottom: 30,
            left: '7%',
            right: '7%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {},
        xAxis: [
            {
                type: 'category',
                data: group,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 100,
                interval: 10, // 分成几份
                axisLabel: {
                    formatter: '{value}分'
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        series: [
            {
                barWidth: 15, // 柱的宽度
                yAxisIndex: 0, // y轴的索引
                name: '平均分',
                type: 'bar',
                data: avgScore
            },
            {
                barWidth: 15, // 柱的宽度
                yAxisIndex: 1,
                name: '低于60分人数',
                type: 'bar',
                data: lt60
            },
            {
                barWidth: 15, // 柱的宽度
                yAxisIndex: 1,
                name: '60分到80分之间',
                type: 'bar',
                yAxisIndex: 1,
                data: gt60
            },
            {
                barWidth: 15, // 柱的宽度
                yAxisIndex: 1,
                name: '高于80分',
                type: 'bar',
                yAxisIndex: 1,
                data: gt80
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 地图
function map(hometown, chinaDatas) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.map'));

    var chinaGeoCoordMap = hometown;
    var chinaDatas = chinaDatas;

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [['北京市', chinaDatas]].forEach(function (item, i) {
        // console.log(item)
        series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: convertData(item[1])
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: function (val) {
                return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#0f0',
                        formatter: '{b}',
                        textStyle: {
                            color: "#94cd78"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60"
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线',
            textStyle: {
                color: '#6d767e',
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                // res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                return res;
            }
        },
        backgroundColor: "#fff",
        visualMap: { //图例值控制
            min: 0,
            max: 1,
            calculable: true,
            show: false,
            color: ['#94cd78', '#fc9700', '#ffde00', '#ffde00', 'blue'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: false, //是否允许缩放
            itemStyle: {
                normal: {
                    color: 'rgba(51, 69, 89, .5)', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}